<script setup lang="ts">
import Drawer from "@/components/Drawer.vue";
import Outline from "./Outline.vue";
import Effect from "./Effect.vue";
import MapToolBox from "./MapToolBox.vue";

const emits = defineEmits<{
    (e: "zoomin"): void;
    (e: "zoomout"): void;
    (e: "locate"): void;
    (e: "traffic"): void;
}>();
</script>

<template>
    <Drawer width="460px">
        <div class="container">
            <Outline />
            <Effect />
            <div class="box">
                <MapToolBox
                    @zoomin="emits('zoomin')"
                    @zoomout="emits('zoomout')"
                    @locate="emits('locate')"
                    @traffic="emits('traffic')"
                />
            </div>
        </div>
    </Drawer>
</template>
<style scoped lang="scss">
.box {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
}
</style>
